<style lang="less">
    @import "abiltityManage.less";
</style>
<template>
    <div class="search">
        <Card title="测评管理">
            <Row type="flex" justify="start" class="code-row-bg">

                <Col span="24">
                    <Form ref="form" :model="form" :label-width="85" :rules="formValidate">
                        <FormItem label="标题" prop="remark">
                            <Input v-model="form.remark"/>
                        </FormItem>
                        <FormItem label="封面图" prop="abilityImage">
                            <upload-input :fileUrl="form.abilityImage" fileSize="400" fileWh="750*566" @on-change="handleUpload" width="400px" ref="upload"></upload-input>
                        </FormItem>
                        <FormItem label="报名费" prop="abilityPrice">
                            <InputNumber style="width:150px"  :min="0" v-model="form.abilityPrice" :formatter="value  => `¥ ${value }`.replace(/B(?=(d{3})+(?!d))/g, ',')" :parser="value => value.replace(/¥s?|(,*)/g, '')"></InputNumber>
                        </FormItem>
                        <FormItem label="测评内容" prop="abilityContent">
                            <div ref="editor"></div>
                        </FormItem>
                        <Form-item>
                            <Button @click="submitEdit" :loading="submitLoading" type="primary" icon="ios-create-outline" style="margin-right:5px">修改并保存</Button>
                            <Button @click="handleReset">重置</Button>
                        </Form-item>
                    </Form>
                </Col>
            </Row>
        </Card>
    </div>
</template>

<script>
    import {uploadFile} from "@/api/index";
    import {getAbiltity,updateAbiltity} from "@/api/bus";
    import E from "wangeditor";
    // 表情包配置 自定义表情可在该js文件中统一修改
    import {sina} from "@/libs/emoji";
    import UploadInput from "../../my-components/flyme/upload-input";
    let editor = null;
    var xss = require("xss");
    export default {
        name: "abiltity-manage",
        components: {UploadInput},
        data() {
            return {
                loading: false, // 树加载状态
                loadingEdit: false, // 编辑上级树加载状态
                modalVisible: false, // 添加显示
                selectList: [], // 多选数据
                selectCount: 0, // 多选计数
                showParent: false, // 显示上级标识
                modalTitle: "", // 添加标题
                editTitle: "", // 编辑节点名称
                searchKey: "", // 搜索树
                form: {
                    // 编辑对象初始化数据
                    id: "",
                    remark:"",
                    abilityImage: "",
                    abilityPrice:0,
                    abilityContent:""
                },
                formAdd: {
                    // 添加对象初始化数据
                },
                formValidate: {
                    // 表单验证规则
                    title: [{required: true, message: "名称不能为空", trigger: "blur"}]
                },
                submitLoading: false,
                data: [],
                dataEdit: []
            };
        },
        methods: {
            init() {
                this.getAbiltity();
                this.initEditor();
            },
            initEditor() {
                let that = this;
                editor = new E(this.$refs.editor);
                editor.customConfig.onchange = html => {
                    this.form.abilityContent = xss(html);
                };
                editor.customConfig.uploadImgServer = uploadFile;
                editor.customConfig.uploadImgHeaders = {
                    Authorization: that.getStore("accessToken")
                };
                editor.customConfig.uploadFileName = "file";
                editor.customConfig.uploadImgHooks = {
                    before: function (xhr, editor, files) {
                    },
                    success: function (xhr, editor, result) {
                    },
                    fail: function (xhr, editor, result) {
                        that.$Message.error("上传图片失败");
                    },
                    error: function (xhr, editor) {
                        that.$Message.error("上传图片出错");
                    },
                    timeout: function (xhr, editor) {
                        that.$Message.error("上传图片超时");
                    },
                    customInsert: function (insertImg, result, editor) {
                        if (result.status === true) {
                            let url = result.data.fileUrl;
                            insertImg(url);
                            that.$Message.success("上传图片成功");
                        } else {
                            that.$Message.error(result.info);
                        }
                    }
                };
                editor.customConfig.fontNames = ["微软雅黑", "宋体", "黑体", "Arial"];
                editor.customConfig.emotions = [
                    {
                        title: "新浪",
                        type: "image",
                        content: sina
                    }
                ];
                editor.create();
            },
            editHTML() {
                this.dataEdit = this.form.abilityContent;
                this.showHTMLModal = true;
            },
            editHTMLOk() {
                editor.txt.html(this.dataEdit);
                this.form.abilityContent = xss(this.dataEdit);
                this.showHTMLModal = false;
            },
            handleUpload(v) {
                this.form.abilityImage = v.fileUrl;
            },
            getAbiltity() {
                this.loading = true;
                getAbiltity('1').then(res => {
                    this.loading = false;
                    if (res.status === true) {
                        this.form = res.data;
                        editor.txt.html(res.data.abilityContent);
                        this.$refs.upload.setPicUrl(this.form.abilityImage);
                    }
                });
            },
            cancelEdit() {
                let data = this.$refs.tree.getSelectedNodes()[0];
                if (data) {
                    data.selected = false;
                }
                this.isMenu = false;
                this.isButton = false;
                this.$refs.form.resetFields();
                delete this.form.id;
                this.editTitle = "";
            },
            handleReset() {
                this.$refs.form.resetFields();
                this.form.status = 0;
            },
            submitEdit() {
                this.$refs.form.validate(valid => {
                    if (valid) {

                        this.submitLoading = true;
                        // 编辑
                        updateAbiltity(this.form).then(res => {
                            this.submitLoading = false;
                            if (res.status === true) {
                                this.$Message.success("更新成功");
                            }
                        });
                    }
                });
            }
        },
        mounted() {
            this.init();
        }
    };
</script>